<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="6" style="margin: 10px 0">
        <el-card class="box-card">
          <img src="/imgs/a.jpg" style="width: 100%;height: 145px" alt="">
          <p>奶油面包</p>
          <el-row :gutter="20">
           <el-col :span="4">
             <el-avatar src="/imgs/head.jpg" :size="35"></el-avatar>
           </el-col>
           <el-col :span="20">
             <p style="margin-top: 10px">汤姆
             <span style="font-size: 12px;color: #666;float:right">面包</span>
             </p>
           </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from "vue";

const bannerArr = ref(["/imgs/banner1.jpg", "/imgs/banner2.jpg", "/imgs/banner3.jpg"])
</script>

<style scoped>

</style>